<template>
  <My-popover class="flex items-center" placement="LB">
    <template #reference>
      <div
        class="guide-my relative flex items-center p-0.5 rounded-sm cursor-pointer duration-200 outline-none hover:bg-zinc-100 hover:dark:bg-zinc-800"
      >
        <!-- 头像 -->
        <img
          class="w-4 h-4 rounded-sm"
          src="https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/avatar.jpg"
        />
        <!-- vip 标记 -->
        <My-svg-icon
          name="vip"
          class="w-1.5 h-1.5 absolute right-[16px] bottom-0"
        ></My-svg-icon>
      </div>
    </template>
    <div class="w-[170px]">
      <div
        class="cursor-pointer bg-white/10 dark:bg-white/10 backdrop-blur-lg dark:backdrop-blur-xl border border-white/10 dark:border-white/10 shadow-lg rounded-sm flex flex-col"
      >
        <li
          v-for="item in menuArr"
          :key="item.id"
          class="flex p-3 items-center hover:bg-zinc-100/80 dark:hover:bg-zinc-700"
        >
          <My-svg-icon
            @click="onItemClick(item.path)"
            class="w-1.5 h-1.5 mr-1"
            :name="item.icon"
            fillClass="fill-zinc-900 dark:fill-zinc-300"
          ></My-svg-icon>
          <span
            @click="onItemClick(item.path)"
            class="text-zinc-900 dark:text-zinc-100 text-sm"
            >{{ item.title }}</span
          >
        </li>
      </div>
    </div>
  </My-popover>
</template>

<script setup>
import { useRouter } from 'vue-router'
const currentRouter = useRouter()

// 构建 menu 数据源
const menuArr = [
  {
    id: 0,
    title: '博主资料',
    icon: 'resources',
    path: '/my'
  },
  {
    id: 1,
    title: '登入网站',
    icon: 'login',
    path: '/profile'
  }
]
const onItemClick = (path) => {
  if (path) {
    currentRouter.push(path)
  }
}
</script>

<style lang="scss" scoped></style>
